<template>
    <div id="home">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img class="img" src="@/assets/t1.png">
                </div>
                <div class="swiper-slide">
                    <img class="img" src="@/assets/t2.jpg">
                </div>
            </div>
        </div>
        <!--        通知公告, 最新课程, 用户登录等内容-->
        <div class="container-content">
            <Notice/>
            <new-course/>
            <login/>
        </div>
<!--最受关注 研学成果-->
        <div class="container-content">
            <StudiesResults/>
            <BiggestConcern/>
        </div>


    </div>
</template>
<!--主页-->
<script>
    import Swiper from "swiper";
    import Notice from "./childComponent/notice/Notice";
    import NewCourse from "./childComponent/newCourse/NewCourse";
    import Login from "./childComponent/login/Login";
    import StudiesResults from "../../component/studiesResults/StudiesResults";
    import BiggestConcern from "./childComponent/biggestConcern/BiggestConcern";

    export default {
        name: "Home",
        created() {

        },
        components: {
            Login,
            Notice,
            NewCourse,
            StudiesResults,
            BiggestConcern
        },
        mounted() {
            new Swiper(".swiper-container", {
                loop: true,
                autoplay: true,//可选选项，自动滑动
                autoplayDisableOnInteraction: false
            })
        },
        data() {
            return {}
        }
    }
</script>

<style scoped>
    @import "~swiper/css/swiper.min.css";

    .swiper-slide, .swiper-slide img {
        width: 100%;
        height: 900px;
    }

    .container-content {
        display: flex;
        justify-content: space-evenly;
    }
</style>
